<!--
@function: 这是一个高级查询对话框
@author:wzh
@description: 
1.描述
    对话框中的精确查询列可以动态添加，使用时必须给定初始值tableColumns
2.设置：
    dialogVisible:Boolean 对话框的关闭和打开控制 默认值：false
    tableColumns:Array 需要精确查询的咧，
	  showClose:Boolean 是否显示关闭按钮 默认值：false
	  showModal:Boolean 是否需要遮罩层 默认值：true
	  checklistArray:Array 底部复选框，是否有
	  closeOnClickModal:Boolean 是否可以通过点击 modal 关闭 Dialog  默认值：false

@modify:
修改内容：
 -->
 <template>
 	<div class="advanceSeach-dialog">
 		<el-dialog title="高级查询" :visible.sync="diaVisible" width="55%" :modal="showModal" :show-close="showClose" :close-on-click-modal="closeOnClickModal">
		  <el-row>
	      <el-col>
	        <div v-for="(condition, index) in multipleCondition" :key="index" style="margin-bottom: 10px;text-align: right;white-space:nowrap;">
	          <span v-if="typeof(condition.logic) !== 'undefined'">
	            <el-button type="warning" icon="el-icon-minus" size="mini" @click="delRow(condition)" style="width: 3.5%;"></el-button>
	            <el-select v-model="condition.logic" style="width: 11%;" size="mini" placeholder="逻辑运算符、必填">
	              <el-option key="AND" label="并且" :value="'AND'"></el-option>
	              <el-option key="OR" label="或者" :value="'OR'"></el-option>
	              <el-option key="NOT" label="不含" :value="'NOT'"></el-option>
	            </el-select>
	          </span>
	          <el-button v-else type="primary" icon="el-icon-plus" size="mini" @click="addRow" style="width: 15%;">
	            添加查询条件
	          </el-button>
	          <el-select
	            v-model="condition.field"
	            size="mini" style="width: 35%;"
	            placeholder="选择字段名、必填"
	            value-key="code"
	            filterable
	            clearable>
	            <el-option
	              v-for="option in tableColumns"
	              :key="option.code"
	              :label="option.name"
	              :value="option">
	              <span>{{option.name}}</span>
	              <span style="color:#bbb">({{option.tableName}})</span>
	            </el-option>
	          </el-select>
	          <el-select
	            v-model="condition.operator"
	            style="width: 14%;"
	            size="mini"
	            placeholder="比较运算符、必填"
	            clearable>
	            <el-option key=">" label="大于" :value="'>'"></el-option>
	            <el-option key="=" label="等于" :value="'='"></el-option>
	            <el-option key="<" label="小于" :value="'<'"></el-option>
	          </el-select>
	          <el-input
	            size="mini"
	            clearable
	            v-model="condition.value"
	            style="width: 35%;"
	            placeholder="输入字段值、必填">
	          </el-input>
	        </div>
	      </el-col>
	      <div v-if="this.checklistArray.length > 0">
	      	病例随访信息：
		  		<el-checkbox-group v-model="listArray">
					  <el-checkbox v-for="item in checklistArray" :label="item.id" :key="item.id">{{item.value}}</el-checkbox>
					</el-checkbox-group>
		  	</div>
	    </el-row>
		  <span slot="footer" class="dialog-footer">
		  	<span style="color: red;text-align: left;margin-right: 2vw">注：日期类型查询格式为：YYYY-MM-DD</span>
		    <el-button @click="dialogCancel">取 消</el-button>
		    <el-button type="primary" @click="dialogOK">确 定</el-button>
		  </span>
		</el-dialog>
 	</div>
 </template>
 <script>
 	import CheckboxGroupColumn from "@/components/basic/tplcol/CheckboxGroupColumn.vue";

 	var jointCondition = function(datas,checks) {//拼接查询条件,ckecks:勾选的值
 		console.log("拼接");
		var ret = "";
		if(checks){
			 datas.forEach(data => {
			    ret += "AND ZT = '" + data +"'";
			  });
		}else{
			datas.forEach(data => {
			  	if (data.logic && data.logic != "") {
			      ret += " "+ data.logic +" ";
			    }
			    if (data.field && data.field != "") {
			      ret += data.field;
			    }
			    if (data.value && data.value != "") {
			      ret += " = '"+data.value+"'";
			    }
			  });
		}
		 return ret;
	}

	var isAll = function(datas) {//所有内容是否全部填写或选择
	  var ret = true;
	  datas.forEach(data => {
	    if (!data.field && data.field == "") {
	      ret = false;
	      return;
	    }
	    if (!data.logic && data.logic == "") {
	      ret = false;
	      return;
	    }
	    if (!data.value && data.value == "") {
	      ret = false;
	      return;
	    }
	  });
	  return ret;
	}

 	export default {
	 	name: "advanceSearch-dialog",
		 	components: {
		    "checkboxgroup-col": CheckboxGroupColumn,
		 },
	 	props:{
	 		dialogVisible:{
	 			typ:Boolean,
		    default:false
	 		},
	 		showClose:{
	 			type:Boolean,
	 			default:true
	 		},
	 		showModal:{
	 			type:Boolean,
	 			default:true
	 		},
	 		closeOnClickModal:{
	 			type:Boolean,
	 			default:false
	 		},
	 		tableColumns: {
	      type: Array,
	      default: () =>{
	        return [];
	      }
	    },
	    checklistArray:{
	      type: Array,
	      default: () =>{
	        return [];
	      }
	    },

	 	},
	 	methods:{
	 		dialogCancel:function(){//关闭对话框
	 			console.log("取消");
	 			var me = this;
				me.multipleCondition = [{
		    		field:"",
		    		value:"",
		    		operator:""
		    	}];
		    	me.listArray = [];
	 			me.$emit('dialog-cancel',false);
	 		},
	 		dialogOK:function(){//确定
	 			console.log("确定");
	 			var me = this;
	 			var ret;
			    // me.$refs[advanceForm].validate((result, what)=>{
			    //     ret = result;
			    // });
			    // if(!ret){
			    //     me.$message({
			    //       message: "表单信息有误",
			    //       type: "error"
			    //    });
			    //    return;
			    // }
			    if(!isAll(me.multipleCondition)){
			    	console.log("有未填");
			    	me.$message({
			          type: 'warning',
			          message: '所有条件都为必选或必填，有内容未填写，不可以进行此操作!'
			        });
			    	return
			    }
			   var condition = jointCondition(me.multipleCondition,false);
			   if(me.listArray.length>0){
			   		condition += " " + jointCondition(me.listArray,true);
			   }

	 			me.$emit('dialog-ok',{condition:me.multipleCondition,pglx:me.listArray});
	 		},
	 		addRow:function(){// 添加一行条件
	 			 this.multipleCondition.push({
			        field:"",// 字段
			        value:"",// 值
			        logic:"",
			        operator:""
			    });
	 		},
	 		delRow:function(row){// 删除此行条件
	 			var index = this.multipleCondition.indexOf(row);
			    if(index !== -1){
			        this.multipleCondition.splice(index,1);
			    }
	 		},
	 	},
	  	data () {
		    return {
		    	diaVisible:false,
		    	listArray:[],
		    	multipleCondition:[{
		    		field:"",
		    		value:"",
		    	}],

		    }
		},
		created:function(){
			var me = this;
			me.multipleCondition = [{
	    		field:"",
	    		value:"",
	    		operator: ""
	    	}];
	    	me.listArray = [];
		},
		watch:{
			dialogVisible(curVal,oldVal){
				this.diaVisible =curVal;
			},
			diaVisible(curVal,oldVal){
				if(!curVal){
					this.dialogCancel();
				}
			}
		}
	}
 </script>
 <style lang="scss">
.advanceSeach-dialog{
	.column-menu-item {
	    display: inline-flex;
	    text-align: center;
	    vertical-align: middle;
	}
	.dialog-input-text{
		width:35%;
	}
	.dialog-span-name{
		margin-left:2.5vw;
		margin-right:2vw;
		font-size:1vw;
	}
	.el-form-item__label{
		font-size:12pt;
	}
	.el-form-item{
		width:100%;
		margin:0;
	}
}

</style>
